<template>
    <div>
        <div class="header" :style="{'background':maincolor||'#5a6775'}" v-if="pageType==1">
            <!-- 折叠按钮 -->
            <div class="collapse-btn" @click="collapseChage" :style="{'background':maincolor}">
                <i class="el-icon-menu"></i>
            </div>
            <div class="logo">{{sysTitle}}</div>
            <div class="header-right">
                <div class="header-user-con">
                    <div class="time">{{time}}</div>
                    <!-- 用户头像 -->
                    <div class="user-avator" @click="dialogVisible = true"><img src="static/img/head.jpg"></div>
                    <!-- 用户名下拉菜单 -->
                    <div class="user_name">{{username}}</div>
                    <router-link :to="goHome">
                        <span class="iconfont homeicon" title="返回主页">&#xe606;</span>
                    </router-link>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <i class="iconfont changeColor">&#xe622;</i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div class="color_con">
                                    <ul class="clearfix">
                                        <li v-for="(item,index) in colors" :key="index">
                                            <div :style="{'background': item.color}" @click="changeColor(item.color)"></div>
                                        </li>
                                    </ul>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="iconfont logout" @click="logout" title="退出">&#xe618;</div>
                </div>
            </div>
        </div>
        <div class="user_header clearfix" v-if="pageType==0" :style="{backgroundImage:'url(' + require('../../assets/images/bg_'+userColor+'.png')+') ',backgroundColor:'#f0f0f0',backgroundRepeat:'no-repeat', backgroundPosition:'0 0'}">
            <img src="../../assets/images/icon_Category.png" alt="" class="user_img">
            <p class="user_p">{{sysTitle}}</p>
            <div class="header-right-yd clearfix">
                <div class="zy-yd" @click="backHome"><img src="../../assets/images/icon1-yd.png" alt=""></div>
                <!-- <div class="zy-yd"><img src="../../assets/images/icon-yd2.png" alt=""></div> -->
                <el-dropdown>
                        <span class="el-dropdown-link">
                            <img src="../../assets/images/icon-yd2.png" alt="" style="width: 0.4rem; height: 0.4rem; float: left;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div class="color_con" style="width:200px">
                                    <ul class="clearfix">
                                        <li v-for="(item,index) in userColors" :key="index">
                                            <div :style="{'background': item.color}" @click="changeUserColor(item.color)"></div>
                                        </li>
                                    </ul>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                <div class="zy-yd" @click="logout"><img src="../../assets/images/icon3-yd.png" alt=""></div>
            </div>
            <div class="header-right2">
                <div class="header-user-con">
                    <div class="time">{{time}}</div>
                    <!-- 用户头像 -->
                    <div class="user-avator"><img src="static/img/head.jpg"></div>
                    <!-- 用户名下拉菜单 -->
                    <el-dropdown class="user-name" @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{username}}
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <a href="javascript:;" target="_blank">
                                <el-dropdown-item command="modifyPass">修改密码</el-dropdown-item>
                            </a>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- <router-link :to="goHome">
                        <span class="iconfont homeicon" title="返回主页">&#xe606;</span>
                    </router-link> -->
                    <div class="iconfont homeicon" title="返回主页" @click="backHome">&#xe606;</div>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <i class="iconfont changeColor">&#xe622;</i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div class="color_con" style="width:200px">
                                    <ul class="clearfix">
                                        <li v-for="(item,index) in userColors" :key="index">
                                            <div :style="{'background': item.color}" @click="changeUserColor(item.color)"></div>
                                        </li>
                                    </ul>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="iconfont logout" @click="logout" title="退出" style="line-height: 25px">&#xe618;</div>
                </div>
            </div>
            <div class="avatar-yd clearfix">
                <div class="user-avator-yd"><img src="static/img/head.jpg"></div>
                    <!-- 用户名下拉菜单 -->
                    <el-dropdown class="user-name" @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{username}}
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <a href="javascript:;" target="_blank">
                                <el-dropdown-item command="modifyPass">修改密码</el-dropdown-item>
                            </a>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
        </div>
        <div style="font-size: 14px">
        <el-dialog
            title="证书到期提醒"
            :visible.sync="dialogVisible"
            width="30%">
            <span>证书将于{{remainDay}}天后到期，请及时续证书，微信号:INPUTDE</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import bus from '../common/bus';
    import util from '../../utils/index.js'
    export default {
        data() {
            return {
                dialogVisible: false,
                collapse: false,
                fullscreen: false,
                username: localStorage.getItem('userName'),
                message: 2,
                time: "",
                goHome:"",
                colors:[
                    {
                        color: "#1abc9c",
                    },
                    {
                        color: "#5a6775"
                    },
                    {
                        color: "#ed6e4d"
                    },
                    {
                        color: "#fabb3d"
                    },
                    {
                        color: "#aa7ab3"
                    },
                    {
                        color: "#9ad0b9"
                    },
                    {
                        color: "#ea94be"
                    },
                    {
                        color: "#c1374a"
                    }
                ],
                userColors:[{
                    color: '#e06733'
                },{
                    color: '#c9a04f'
                },{
                    color: '#4aa8c6'
                },{
                    color: '#e8899e'
                }],
                pageType: localStorage.getItem('pageType')
            }
        },
        computed:mapState({
            msg: state => state.system.msg,
            maincolor: state => state.system.colors,
            sysTitle: state => state.system.systemTitle,
            verifyCode: state => state.system.verifyCode,
            userColor: state => state.system.userColor,
            linsenceCode: state => state.system.linsence_code,
            remainDay: state => state.system.remainDay
        }),
        methods:{
            verifyLogin() {
                this.$store.dispatch("getInfo",{
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    if(this.verifyCode == 9999995) {
                        this.$message("请先登录");
                        this.$router.push({ path: "/login" });
                    }
                })
            },
            testLinsence() {
                this.$store.dispatch('testLinsence',{
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    if(this.linsenceCode == 10000094 || this.linsenceCode == 10000095 || this.linsenceCode == 10000096 || this.linsenceCode == 10000097 || this.linsenceCode == 10000098) {
                        this.$router.push({ path: '/lincense'});
                    }else{
                        if(this.remainDay <= 15) {
                            this.dialogVisible = true;
                        }else{
                            return;
                        }
                    } 
                })
            },
            getUsercolor() {
                this.$store.dispatch('getUserColor',{
                    sessionId: localStorage.getItem('sessionId')
                })
            },
            backHome() {
                if(localStorage.getItem('pageType') == '1') {
                    this.$router.push({path:'/dashboard'});
                }else{
                    this.$router.push({path:'/user'});
                }
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if(command == 'modifyPass'){
                    this.$router.push('/sqlchangepass');
                }
            },
            //退出
            logout() {
                localStorage.removeItem('sessionId');
                localStorage.removeItem('userName');
                localStorage.removeItem('pageType');
                localStorage.removeItem('userType');
                this.$router.push('/login');
            },
            changeColor(color) {
                this.$store.commit('change_color',{
                    colors: color
                });
                util.toggleClass(document.body, 'custom-' + this.maincolor.slice(1));
                this.$store.dispatch('updateColor',{
                    color: color,
                    sessionId: localStorage.getItem('sessionId')
                })
            },
            changeUserColor(color) {
                this.$store.commit('change_usercolor',{
                    colors: color
                })
                this.$store.dispatch('updateUserColor',{
                    color: color,
                    sessionId: localStorage.getItem('sessionId')
                })
            },
            // 侧边栏折叠
            collapseChage(){
                this.collapse = !this.collapse;
                bus.$emit('collapse', this.collapse);
            },
            // 是否显示修改密码
            showModify() {
                if(localStorage.getItem('userType') == '0' && localStorage.getItem('pageType') == '0') {
                    return true;
                }else{
                    return false;
                }
            },
             getData() {
                var t = new Date();
                var h = t.getHours().toString();
                var m = t.getMinutes().toString();
                var s = t.getSeconds().toString();
                if(h.length < 2) {
                    h = "0" + h;
                }
                if(m.length < 2) {
                    m = "0" + m;
                }
                if(s.length < 2) {
                    s = "0" + s;
                }
                this.time = h + ":" + m + ":" + s;
                let _this = this;
                setTimeout(() => {
                    _this.getData();
                },1000)
            },
            getColor() {
                this.$store.dispatch("getColor", {
                    sessionId: localStorage.getItem('sessionId')
                })
            },
            getTitle() {
                this.$store.dispatch('getSysTitle',{
                    sessionId: localStorage.getItem('sessionId')
                })
            }
        },
        mounted(){
            this.verifyLogin();
            this.testLinsence();
            this.getUsercolor();
            this.getTitle();
            if(document.body.clientWidth < 1500){
                this.collapseChage();
            }
            this.getData();
            if(localStorage.getItem('pageType') == '1') {
                this.goHome = "/dashboard";
                this.$store.dispatch('getColor',{
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    util.toggleClass(document.body, 'custom-' + this.maincolor.slice(1));
                })
            }else{
                this.goHome = "/user"
            }
        }
    }
</script>
<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        line-height: 32px;
        font-size: 20px;
        color: #fff;
    }
    .user_header{
        position: relative;
        width: 100%;
        height: 100px;
        /* background: url('../../assets/images/bg.png') 0 0 no-repeat #f0f0f0; */
        background-size: 100%;
    }
    .user_img{
        float: left;
        display: block;
        width:30px;
        margin: 20px 0 0 77px;
    }
    .user_name{
        color: #fff;
        margin-left: 10px;
        font-size: 14px;
    }
    .user_p{
        float: left;
        color: #fff;
        margin: 14px 0 0 24px;
        font-size: 26px;
        font-family: '微软雅黑';
    }
    .collapse-btn{
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 46px;
    }
    .header .logo{
        float: left;
        width:250px;
        line-height: 46px;
        margin-left:10px;
    }
    .header-right{
        float: right;
    }
    .header-right2{
        float: right;
        font-family: "微软雅黑";
        margin: 11px 73px 0 0;
    }
    .header-user-con{
        display: flex;
        height: 46px;
        align-items: center;
    }
    .btn-fullscreen{
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }
    .btn-bell, .btn-fullscreen{
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
        cursor: pointer;
    }
    .btn-bell-badge{
        position: absolute;
        right: 0;
        top: 2px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: #fff;
    }
    .btn-bell .el-icon-bell{
        color: #fff;
    }
    .user-name{
        margin-left: 10px;
        font-size: 14px;
        margin-left: 10px;
    }
    .user-avator{
        margin-left: 20px;
    }
    .user-avator img{
        display: block;
        width:30px;
        height:30px;
        border-radius: 50%;
    }
    .el-dropdown-link{
        color: #fff;
        cursor: pointer;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
    .productReg{
        font-size: 14px;
        color: #fff;
        margin-right: 20px;
    }
    .homeicon{
        height: 21px;
        line-height: 18px;
        color: #fff;
        font-size: 24px;
        display: inline-block;
        width: 57px;
        text-align: center;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        margin-left: 20px;
        margin-top: 7px;
        cursor: pointer;
    }
    .changeColor{
        height: 21px;
        line-height: 18px;
        color: #fff;
        font-size: 24px;
        display: inline-block;
        width: 57px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 9px;
    }
    .logout{
        height: 21px;
        line-height: 18px;
        color: #fff;
        font-size: 17px;
        display: inline-block;
        width: 57px;
        text-align: center;
        cursor: pointer;
    }
    .time{
        font-size: 16px;
        color: #fff;
    }
    .color_con{
        width: 395px;
        padding-bottom: 7px;
    }
    .color_con ul li{
        list-style: none;
        float: left;
        width: 88px;
        height: 88px;
        margin: 10px 10px 0 0;
    }
    .color_con ul li div{
        width: 100%;
        height: 100%;
        line-height: 88px;
        text-align: center;
        color:#fff;
    }
    @media only screen and (max-width: 750px) {
        .user_header{
            position: relative;
            width: 100%;
            height: 2.64rem;
            background: url('../../assets/images/bg-yd.png') 0 0 no-repeat #f0f0f0;
            background-size: 100%;
        }
        .user_img{
            display: none;
        }
        .user_p{
            margin: 0.14rem 0 0 0.4rem;
            font-size: 0.25rem;
        }
        .time{
            display: none;
        }
        .header-right2{
            display: none;
        }
        .header-right-yd{
            float: right;
            display: block;
            font-size: 24px;
        }
        .header-right-yd div{
            width: 0.4rem;
            height: 0.4rem;
            line-height: 0.4rem;
            float: left;
            margin: 0.2rem 0.4rem 0 0;
            cursor: pointer;
        }
        .header-right-yd div img{
            width: 0.4rem;
            height: 0.4rem;
        }
        .user-avator-yd{
            width: 0.8rem;
            height: 0.8rem;
            float: left;
            overflow: hidden;
            zoom: 1;
        }
        .user-avator-yd img{
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
        }
        .avatar-yd{
            width: 3.2rem;
            height: 0.8rem;
            padding: 0.7rem 0 0 0.4rem;
            line-height: 0.8rem;
            overflow: hidden;
            zoom: 1;    
        }
        .user-name{
            float: left;
            margin-left: 0.4rem;
        }
        .el-dropdown-link{
            font-size: 0.3rem;
            font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
        }
    }
    @media only screen and (min-width: 751px) {
        .header-right-yd{
            display: none;
        }
        .avatar-yd{
            display: none;
        }
    }
    
</style>
